<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>设备管理</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <script type="text/javascript" src="/statics/js/custom/base.js"></script>
    <style>
        .disflex_style1 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;
        }

        .disflex_style2 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .bg{
            background: #cccccc;
            color: #fff !important;
        }
        .bg:hover{
            background: #cccccc;
            color: #fff !important;
        }

        .week-tan{
            position: fixed;
            z-index: 1070;
            left: 0;
            top: 0;
            background-color:rgba(0,0,0,.5);
        }

        .popupDiv{
            line-height: 36px;
            width: 126px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .popupShowDiv {
            padding: 4px 8px;
            font-size: 13px;
            color: white;
            background-color: black;
            position: absolute;
            top: -16px;
            left: 2px;
            min-width: 80px;
            width: max-content;
            text-align: center;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .popupShowDiv::before,
        .popupShowDiv::after {
            position: absolute;
            bottom: -11px;
            left: 62px;
            display: block;
            font-size: 0;
            line-height: 0;
            border-color:black transparent transparent;
            border-style: solid;
            border-width: 7px;
            content: "";
        }

        .bubble::after {
            bottom: -19px;
            border-color: black transparent transparent;
        }

        #tasks tr td:nth-last-child(2){
            max-width: 200px!important;
        }

        #tasks tr td:nth-last-child(2) .help-block{
            width: 190px;
            display: block;
            word-wrap: break-word;
            white-space: normal;
        }
    </style>
</head>

<body>
<div class="container-fluid">

    <!--校准机器-->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" id="jiaozhunDiv" role="dialog"
         aria-labelledby="myLargeModalLabel" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">校准机器</h6>
                    <div class="float-right">
                        <button type="button" class="close" data-dismiss="modal"  aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body" id="jzmsg">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="setjz">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置任务 -->
    <div class="modal fade bs-example-modal-lg" id="settaskDIV" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title p-l-10">设置投喂任务</div>
                    <div class="float-right">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <form id="task_form" class="form-horizontal">
                        <div class="form-group col-md-12 mx_validator">
                            <label for="speciesId">投喂标定</label><span class="required">* </span>
                            <input type="hidden" name="lastModifyTime" value="">
                            <select class="form-control select-init mx_required"
                                    name="calibrationId" id="calibrationId"
                                    mx_required_type="select" mx_required_msg="请选择投喂标定">
                            </select>
                        </div>
                        <div class="col-md-12">
                            <div id="hint_taskset" class="alert alert-info">
                                <div style="float: left;width: 100%;">以下任务序列时间范围是01:00~23:00，根据星期重复</div>
                                <div class="text-danger"><b>23:00~01:00间，系统进行维护，无法执行任务</b></div>
                                <div class="text-danger"><b>随意更换标定，可能会影响已执行的任务记录，不建议更改</b></div>
                            </div>
                            <button class="btn btn-primary btn-sm m-r-sm m-b-15" id="btn-add-task">
                                <i class="fa fa-plus m-r-xs"></i>新增任务
                            </button>
                            <div class="hr-line-dashed"></div>
                            <div class="table-responsive" style="max-height: 500px">
                                <table class="table table-stripped table-bordered addtask">
                                    <thead>
                                    <tr style="background-color: #F5F5F6;text-align: center;">
                                        <th width="150px">星期-天</th>
                                        <th>时钟-时</th>
                                        <th>时钟-分</th>
                                        <th>投喂模式</th>
                                        <th width="200px">投喂量(g)</th>
                                        <th width='70px'>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tasks">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary mx_validator_button"
                            id="btn_upd_task">保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade week-tan" id="weekChooseDiv" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalCenterTitle">星期-天</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body d-flex flex-wrap" id="weekChooseList">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="weekSave">保存</button>
                </div>
            </div>
        </div>
    </div>


    <!--完善资料-->
    <div class="modal fade bs-example-modal-lg" id="commonDiv" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="myModalLabel">完善资料</h6>
                    <div class="float-right">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <form action="" id="commonForm">
                        <input type="hidden" name="lastModifyTime" value="">
                        <div class="form-group col-md-12 mx_validator workshopId">
                            <label for="workshopId">所在车间</label><span class="required">* </span>
                            <input type="hidden" name="id" value="" id="xxid">
                            <select class="form-control select-init mx_required"
                                    mx_required_type="select" mx_required_msg="请选择所在车间"
                                    id="workshopId" name="workshopId" isDefault="1">
                            </select>
                        </div>
                        <div class="form-group col-md-12 mx_validator typeId">
                            <label for="typeId">设备类型</label><span class="required">* </span>
                            <select class="form-control select-init mx_required"
                                    mx_required_type="select" mx_required_msg="请选择设备类型"
                                    id="typeId" name="typeId" isDefault="1">
                            </select>
                        </div>
                        <div class="form-group col-md-12 mx_validator speciesId">
                            <label for="speciesId">养殖物种</label><span class="required">* </span>
                            <select class="form-control select-init mx_required"
                                    mx_required_type="select" mx_required_msg="请选择养殖物种"
                                    id="speciesId" name="speciesId" isDefault="1">
                            </select>
                        </div>
                        <div class="form-group col-md-12 mx_validator">
                            <label for="name">设备名称(养殖池)</label><span class="required">* </span>
                            <input type="text" class="form-control mx_required mx_custom"
                                   mx_required_msg="设备名称(养殖池)不能为空" id="name" name="name" value=""
                                   placeholder="请输入设备名称(养殖池)"/>
                        </div>
                        <div class="form-group col-md-12 mx_validator m-0">
                            <label for="name" class="m-0">养殖池信息</label>
                        </div>
                        <div class="form-group disflex_style1">
                            <div style="padding-right: 20px">
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="squaresPond" name="pond"
                                           class="custom-control-input" value="squaresPond"
                                           onclick="changePond(0)" checked>
                                    <label class="custom-control-label" for="squaresPond">方形池子</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="circlesPond" name="pond"
                                           class="custom-control-input" value="circlesPond"
                                           onclick="changePond(1)">
                                    <label class="custom-control-label" for="circlesPond">圆形池子</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input type="radio" id="anisePond" name="pond"
                                           class="custom-control-input" value="anisePond"
                                           onclick="changePond(2)">
                                    <label class="custom-control-label" for="anisePond">八角池子</label>
                                </div>
                            </div>
                        </div>
                        <!--                                    长方形-->
                        <div id="squaresPondShow" style="display: block">
                            <div class="disflex_style2">
                                <div class="col-md-8 pr-0">
                                    <div class="col-md-4 mx_validator" style="float:left;">
                                        <label for="poolLong">长度(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池长度不能为空" id="poolLong"
                                               name="poolLong" value=""/>
                                    </div>
                                    <div class="col-md-4 mx_validator" style="float:left;">
                                        <label for="poolWidth">宽度(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池宽度不能为空" id="poolWidth"
                                               name="poolWidth" value=""/>
                                    </div>
                                    <div class="col-md-4 mx_validator" style="float:left;">
                                        <label for="poolHeight">高度(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池高度不能为空" id="poolHeight"
                                               name="poolHeight" value=""/>
                                    </div>
                                </div>
                                <div class="disflex_style2 m-0">
                                    <button type="button" class="btn btn-primary" id="btn_squaresPond"
                                            style="margin-top: 32px">计算
                                    </button>
                                    <div class="col-md-9 mx_validator" style="float:left;">
                                        <label for="poolVolume">体积(<span
                                                style="font-size: 12px;color:red;">例如30，代表30m³</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池体积不能为空" id="poolVolume"
                                               name="poolVolume" value="" disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--                                    圆形-->
                        <div id="circlesPondShow" style="display: none">
                            <form class="disflex_style2">
                                <div class="col-md-5 pr-0">
                                    <div class="col-md-6 mx_validator" style="float:left;">
                                        <label for="poolLong">半径(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池半径不能为空" id="poolLong2"
                                               name="poolLong" value=""/>
                                    </div>
                                    <div class="col-md-6 mx_validator" style="float:left;">
                                        <label for="poolHeight">高度(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池高度不能为空" id="poolHeight2"
                                               name="poolHeight" value=""/>
                                    </div>
                                </div>
                                <div class="disflex_style2 m-0">
                                    <button type="button" class="btn btn-primary" id="btn_circlesPond"
                                            style="margin-top: 32px">计算
                                    </button>
                                    <div class="col-md-9 mx_validator" style="float:left;">
                                        <label for="poolVolume">体积(<span
                                                style="font-size: 12px;color:red;">例如30，代表30m³</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池体积不能为空" id="poolVolume2"
                                               name="poolVolume" value="" disabled/>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--                                    八角-->
                        <div id="anisePondShow" style="display: none">
                            <div class="disflex_style2">
                                <div class="col-md-8 pr-0">
                                    <div class="col-md-4 mx_validator" style="float:left;">
                                        <label for="poolLong">边长(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池边长不能为空" id="poolLong3"
                                               name="poolLong" value=""/>
                                    </div>
                                    <div class="col-md-4 mx_validator" style="float:left;">
                                        <label for="poolWidth">半径(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池半径不能为空" id="poolWidth3"
                                               name="poolWidth" value=""/>
                                    </div>
                                    <div class="col-md-4 mx_validator" style="float:left;">
                                        <label for="poolHeight">高度(<span
                                                style="font-size: 12px;color:red;">单位m</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池高度不能为空" id="poolHeight3"
                                               name="poolHeight" value=""/>
                                    </div>
                                </div>
                                <div class="disflex_style2 m-0">

                                    <button type="button" class="btn btn-primary" id="btn_anisePond"
                                            style="margin-top: 32px">计算
                                    </button>
                                    <div class="col-md-9 mx_validator" style="float:left;">
                                        <label for="poolVolume">体积(<span
                                                style="font-size: 12px;color:red;">例如30，代表30m³</span>)</label>
                                        <span class="required">* </span>
                                        <input type="text" class="form-control mx_required mx_custom"
                                               mx_required_msg="养殖池体积不能为空" id="poolVolume3"
                                               name="poolVolume" value="" disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary mx_validator_button" id="infoSubmit">保存
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body pt-0">
                    <header class="card-header pr-0 pl-0">
                        <div class="card-title">设备管理</div>
                    </header>
                    <div class="clearfix p-b-10">
                        <form class="form-inline form-space-b" id="searchForm" method="post">
                            <div class="mx_search p-t-10">
                                <div class="form-group m-r-10">
                                    <input class="form-control width150" type="text" name="code"
                                           placeholder="请输入设备代码..">
                                </div>
                                <div class="form-group m-r-10">
                                    <input class="form-control width150" type="text" name="name"
                                           placeholder="请输入设备名称..">
                                </div>
                                <div class="d-flex justify-content-between">
                                    <a class="btn btn-primary m-r-10" id="searchButton"><i
                                            class="mdi mdi-magnify"></i> 搜索</a>
                                    <button class="btn btn-secondary" id="resetButton"><i
                                            class="mdi mdi-delete"></i> 重置查询
                                    </button>
                                </div>
                            </div>
                            <div class="form-inline p-t-10">
                                <button type="button"
                                        class="btn btn-primary m-r-10 startStation">批量启动
                                </button>
                                <button type="button"
                                        class="btn btn-primary m-r-10 stopStation">批量停止
                                </button>
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#settaskDIV" id="toSetTask">批量设置任务
                                </button>
                            </div>
                        </form>
                    </div>
                    <table id="tableAjaxId">
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="/statics/js/apis/station/station.js"></script>
<script type="text/javascript" src="/statics/js/custom/table.js?_v=1.1"></script>
<script type="text/javascript" src="/statics/js/library/station/sort_array.js"></script>
<script type="text/javascript" src="/statics/js/library/station/week_select.js"></script>
<script type="text/javascript" src="/statics/js/custom/select.js?_v=1"></script>
<script type="text/javascript" src="/statics/js/library/station/list.js"></script>
</body>

</html>